<template>
  <!--  面包屑-->
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/main' }">主页</el-breadcrumb-item>
    <el-breadcrumb-item>
      <a href="/course">课程信息表</a></el-breadcrumb-item>
  </el-breadcrumb>

  <div class="box">
    <div class="table-oper">
<!--      <el-button-group class="oper-left">-->
<!--        <el-button type="danger">批量删除</el-button>-->
<!--      </el-button-group>-->
      <el-form :inline="true" :model="courseList" class="oper-right">
        <el-form-item label="姓名">
          <el-input v-model="keyword" placeholder="请输入课程id" />
          <el-button type="primary" @click="onSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table :data="courseList.data" border style="width: 100%">
      <el-table-column fixed prop="id" label="编号" width="80" />
      <el-table-column prop="name" label="课程名称"  />
      <el-table-column prop="teacherId" label="教师编号"  />
      <el-table-column prop="description" label="描述"  >
        <template v-slot="{ row }">
          <div class="content-cell">
            <span>{{ row.description }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="score" label="评分"  />
      <el-table-column prop="visable" label="是否开课"  />
      <el-table-column prop="startTime" label="开课时间"  />
      <el-table-column prop="finishTime" label="结课时间"  />
      <el-table-column prop="createTime" label="创建课程时间"  />
      <el-table-column prop="updateTime" label="更新时间"  />
      <el-table-column prop="status" label="状态"  />

      <el-table-column prop="img" label="课程封面" style="width: 100px">
        <template v-slot="{ row }">
          <img :src="row.img" style="width: 100%; height: auto;" />
        </template>
      </el-table-column>

      <el-table-column prop="likeNumber" label="点赞数"  />
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="{row}">
          <el-button  type="danger" size="small" @click="row.status ? recover(row.id) : del(row.id)" > {{ row.status ? '恢复' : '删除' }}</el-button>
<!--          <el-button link type="primary" size="small" @click="edi">编辑</el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        :current-page="pageNum"
        :page-size="pageSize"
        :background="true"
        layout="total, prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
        class="pagination"
        style="float: right"
    />
  </div>


</template>
<script setup>
import { ElMessageBox,ElMessage } from 'element-plus'
import {ref,reactive,getCurrentInstance,onMounted} from 'vue'
import axios from "axios";
const {proxy}=getCurrentInstance();//proxy就代表Vue对象
import userApi from '../api/public/public.js'
import ikunImage from '../assets/ikun.png';
//将数组数据包含成一个对象
let list=reactive({data:[]});
let img =ref(ikunImage);
let courseList=reactive({
  id: "",
  name: "",
  teacherId: "",
  description: "",
  score: "",
  visable:"",
  startTime:"",
  finishTime: "",
  createTime: "",
  updateTime: "",
  status: "",
  img: "",
  likeNumber: "",
});
let number=ref(1);
let pageSize=ref(10);
let total=ref(1);
let pageNum=ref(0);
let keyword=ref("");

//删除功能

const del = (uid) => {
  console.log("uid:"+uid)
  ElMessageBox.confirm(
      '确定要删除吗？',
      '提示',
      { confirmButtonText: '确定', cancelButtonText: '返回', type: 'warning' }
  )
      .then(() => {
        // 执行删除操作，可以是发送网络请求删除数据或执行前端视图上的删除操作
        // 假设这里使用axios发送网络请求删除数据，删除成功后给出提示
        axios.get("http://localhost:8080/shixun/user/delete?id="+uid)
            .then(response => {
              // 删除成功的逻辑
              ElMessage.success('删除成功！')
              // 刷新网页
              window.location.reload()
            })
            .catch(error => {
              // 错误处理
              ElMessage.error('删除失败！')
            })
      })
      .catch(() => {
        // 用户点击了"取消"按钮
      });
};

const recover = (uid) => {
  console.log('uid:', uid)
  ElMessageBox.confirm(
      '确定要恢复吗？',
      '提示',
      { confirmButtonText: '确定', cancelButtonText: '返回', type: 'warning' }
  )
      .then(() => {
        // 发送恢复请求
        axios.get("http://localhost:8080/shixun/user/reuser?id="+uid)
            .then(response => {
              // 恢复成功的逻辑
              ElMessage.success('恢复成功！')
              // 刷新网页
              window.location.reload()
            })
            .catch(error => {
              // 错误处理
              ElMessage.error('恢复失败！')
            })
      })
      .catch(() => {
        // 用户点击了"取消"按钮
      })
}
//编辑
function edi(){

};

onMounted(()=>{
  handleCurrentChange(number.value)
})

//分页
function handleCurrentChange(number){
  pageNum=number;
  userApi.getCourseList(pageNum).then((response)=>{
    list.data=response.data.data.list;
    // console.log("list==",list);
    total.value=response.data.data.total;
    pageSize.value=response.data.data.pageSize;
    pageNum=response.data.data.pageNum;
    courseList.data=list.data;
    console.log(courseList.data)
  });
}
//搜索
function onSearch() {
  let key = keyword.value.trim();
  console.log("params =", key);
  if(key==""){
    handleCurrentChange(number.value);
  }else{
    userApi.courseSearch(key).then(response => {
      console.log("response =", response);
      courseList.data= response.data.data.list;
      console.log("courseList.data =", courseList);
    })
  }
}
</script>

<style scoped>
.box{
  margin-top:30px;
}
.pagination{
  margin-top:15px;
}
.oper-left{
  float:left;
}
.oper-right{
  float: right;
}
.content-cell {
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 使用省略号代替隐藏的内容 */
  display: -webkit-box; /* 用于作为弹性盒子布局方式 */
  -webkit-box-orient: vertical; /* 垂直方向排列 */
  -webkit-line-clamp: 1; /* 最多显示两行 */
}
</style>